/** @jsxImportSource @emotion/react */
import {  css } from "@emotion/react";
import * as React from "react";
import {
  useTheme, TwoHalfFrame,
} from "customize-easy-ui-component";

//import { useSession,  useSignOut } from "../auth";
//import {Link as RouterLink, useRoute, useLocation, Switch, Route } from "wouter";
import { Link as RouterLink } from "../routing/Link";
import { useMedia } from "use-media";
import { Layout } from "./Layout";
//import { RelationList } from "./RelationList";
import  IspDetail  from "./IspDetail";
//import { ReportSample } from "./ReportSample";
//import { AddReport } from "./report/AddReport";
import {TaskList} from "../task/TaskList";
import {useContext} from "react";
import {UserContext} from "../routing/UserContext";
import useLogoutMutation from "../common/useLogoutMutation";
import {PreloadedQuery, usePreloadedQuery} from "react-relay/hooks";
//import {DetailMainQuery} from "./__generated__/DetailMainQuery.graphql";
import {MeIspList} from "./MeIspList";
import {UserTaskList} from "./UserTaskList";
import {MySubReport} from "./MySubReport";
import {DetailReports} from "./DetailReports";
import {DeviceList} from "../device/DeviceList";
// import {TwoHalfFrame} from "../../UiDebugSave/sample/TwoHalfFrame";


const graphql = require("babel-plugin-relay/macro");

//把查询定义独立提取出来，可以多个路由主页共享用。改成用XxxQuery<typeof DetailMainQuery>( 同时 import 自动修正;路由器的Query名字匹配配套一致。
export const DetailMainQuery= graphql`
    query DetailMainQuery($id:ID,
    ) {
        ...DetailReports
    }
`;


interface DetailMainProps {
    prepared: {
        myQuery: PreloadedQuery<typeof DetailMainQuery>;
    }
    children: React.ReactNode;
    id?: string;
    routeData: any;
}

export default function DetailMain(props: DetailMainProps) {
  const theme = useTheme();
  //const {user} = useSession();
  const isLarge = useMedia({ minWidth: "768px" });
    const {user, setUser} =useContext(UserContext);
//  const [match, params] = useRoute("/inspect/:recipe/report/:rep");
//  const [match1, params1] = useRoute("/inspect/:recipe*");
    //把该页面{当前mount的组件}所需要的预制数据preLoad()，数据需求需要在这里预先定义好了，才能够在切换路由点击连接时提前准备完数据的获取，避免render多来一回。
    const data =usePreloadedQuery<typeof DetailMainQuery>(
        DetailMainQuery,
        props.prepared.myQuery,
    );

  console.log("来DetailMain看当前的props=",props ,"prepared=",props.prepared);

  return (
      <TwoHalfFrame rightPanel={props.children}>
          <DetailReports isps={data} routeData={props.routeData}/>
      </TwoHalfFrame>
  );
};
